<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">

            <el-form-item label="网关名称" prop="gatewayId">
                <gateway-select @changeGateway="changeGateway"/>
            </el-form-item>

            <el-form-item label="回路名称" prop="loopName">
                <el-input
                        v-model="queryParams.loopName"
                        placeholder="请输入回路名称"
                        clearable
                />
            </el-form-item>

            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="handleQuery">刷新</el-button>
            </el-form-item>

        </el-form>

        <el-row :gutter="20" v-if="this.loopList.length === 0" v-loading="globalLoading">
            <el-col :xs="24" :lg="8" style="margin-top: 20px">
                <el-card class="box-card">
                    该网关下暂无控制点信息
                </el-card>
            </el-col>
        </el-row>

        <el-row :gutter="20" v-if="this.loopList.length > 0" v-loading="globalLoading">

            <el-col :xs="24" :sm="8" :md="6" :lg="6" :xl="4" style="margin-top: 20px"
                    v-for="(item, index) in this.loopList" :key="index">

                <el-card class="box-card" v-loading="item.loading">

                    <div slot="header" class="clearfix"
                         style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
            <span style="font-size: 16px; height: 35px; display: inline-block; line-height: 35px">{{
                    item.loopName
                }}</span>


                        <el-link :underline="false" style="float: right; height: 35px; line-height: 35px"
                                 v-if="item.loopType === '0'" type="info">开关型
                        </el-link>
                        <el-link :underline="false" style="float: right; height: 35px; line-height: 35px"
                                 v-if="item.loopType === '1'" type="info">数值型
                        </el-link>

                        <!--            <el-tag style="float: right; " v-if="item.loopValue !== '1'" type="danger">关</el-tag>-->
                        <!--            <el-tag style="float: right; " v-if="item.loopValue === '1'" type="success">开</el-tag>-->
                        <!--            <el-button style="float: right; padding: 3px 0" type="text" @click="readModule(index)">读取</el-button>-->
                    </div>


                    <el-form>

                        <el-form-item label="网关状态">
                            <svg-icon v-if="item.serverOnline === '1'" icon-class="wifi-online"
                                      style="width: 3em; height: 3em;"/>
                            <svg-icon v-if="item.serverOnline === '0'" icon-class="wifi-offline"
                                      style="width: 3em; height: 3em;"/>
                        </el-form-item>

                        <!--            <el-form-item label="开关状态">-->

                        <!--              <el-tag v-if="item.loopValue !== '1'" type="danger">关</el-tag>-->
                        <!--              <el-tag v-if="item.loopValue === '1'" type="success">开</el-tag>-->
                        <!--&lt;!&ndash;              <el-tag v-if="item.loopValue === '2'" type="warning">未知</el-tag>&ndash;&gt;-->

                        <!--            </el-form-item>-->

                        <el-form-item label="操作">

                            <!--              <el-button v-if="item.loopValue !== '1'" type="success" @click="handleLoopStatusChange(index, '1')">开启</el-button>-->
                            <!--              <el-button v-if="item.loopValue === '1'" type="danger" @click="handleLoopStatusChange(index, '0')">关闭</el-button>-->

                            <el-switch v-if="item.loopType==='0'"
                                       v-model="item.switchValue"
                                       :width="100"
                                       active-color="#13ce66"
                                       active-value="1"
                                       inactive-value="0"
                                       active-text="开启"
                                       inactive-text="关闭"
                                       @change="handleLoopStatusChange(index, item.switchValue)">
                            </el-switch>

                            <div v-if="item.loopType==='1'" style="display: flex">
                                <el-input clearable v-model="item.loopValue" placeholder="输入数值"></el-input>
                                <el-button style="margin-left: 5px"
                                           type="success"
                                           size="small" @click="handleLoopSetLoopValue(index, item.loopValue)">设置
                                </el-button>
                            </div>

                        </el-form-item>

                    </el-form>
                </el-card>
            </el-col>

        </el-row>

    </div>
</template>

<script>
import {sendMessage} from '@/api/netty/nettyMessage'
import {listLoop} from '@/api/equipment/loop'
import gatewaySelect from '../../common/GatewaySelect.vue'

const common = require('@/api/common/common')

export default {
    inject: ['reload'],
    name: 'Loop',
    components: {
        gatewaySelect
    },
    data() {
        return {
            queryParams: {
                gatewayId: 0,
                projectId: null,
                gatewayNumber: null
                // pageNum: 1,
                // pageSize: 10,
            },
            // loopValue: true,
            showSearch: true,
            gatewayMapping: {},
            gatewayList: [],
            loopList: [],
            // 当前网关编号
            currentGatewayNumber: null,
            currentGatewayId: null,

            globalLoading: false,
            gatewayListOption: [],

            total: 0,
            messageObj: {}
        }
    },
    created() {

    },
    methods: {
        handleQuery() {
            this.getList()
        },

        // 接收子组件传递的消息
        changeGateway(obj) {
            this.gatewayListOption = obj.gatewayListOption
            this.queryParams.projectId = obj.projectId
            this.queryParams.gatewayId = obj.gatewayId
            this.getList()
        },

        getList() {

            this.globalLoading = true

            listLoop(this.queryParams).then(response => {

                this.loopList = []

                response.data.forEach(item => {
                    item.switchValue = item.loopValue
                    item.loading = false

                    this.loopList.push(item)
                })

                this.globalLoading = false

                // console.log(this.loopList)
            }, error => {
                this.globalLoading = false
            })
        },

        // loopValue 改变后的值
        handleLoopStatusChange(index, loopValue) {
            if (loopValue === '0') {
                this.closeLoop(index, '0')
            }
            if (loopValue === '1') {
                this.openLoop(index, '1')
            }
        },

        closeLoop(index, switchValue) {
            this.commonLoop(index, '0', switchValue)
        },

        openLoop(index, switchValue) {
            this.commonLoop(index, '1', switchValue)
        },

        commonLoop(index, value, switchValue) {

            this.loopList[index].loading = true

            let loop = this.loopList[index]

            this.messageObj.projectId = loop['projectId']
            this.messageObj.gatewayNumber = loop['gatewayNumber']
            this.messageObj.gatewayId = loop['gatewayId']
            this.messageObj.loopId = loop['loopId']
            this.messageObj.stationNumber = loop['siteNumber']
            this.messageObj.register = loop['position']
            this.messageObj.operationName = loop['loopName']
            this.messageObj.hardwareType = 0
            this.messageObj.paramType = 0
            this.messageObj.operationType = 1
            if (value === '0') {
                this.messageObj.operationAction = '关闭回路'
            }
            if (value === '1') {
                this.messageObj.operationAction = '开启回路'
            }
            this.messageObj.writeValue = value
            this.messageObj.dataLength = 1

            this.send2Web(index, switchValue)
        },

        handleLoopSetLoopValue(index, value) {

            let loop = this.loopList[index]

            this.messageObj.projectId = loop['projectId']
            this.messageObj.gatewayNumber = loop['gatewayNumber']
            this.messageObj.gatewayId = loop['gatewayId']
            this.messageObj.loopId = loop['loopId']
            this.messageObj.stationNumber = loop['siteNumber']
            this.messageObj.register = loop['position']
            this.messageObj.operationName = loop['loopName']
            this.messageObj.hardwareType = 0
            this.messageObj.paramType = 0
            this.messageObj.operationType = 1
            this.messageObj.operationAction = '设置回路'
            this.messageObj.writeValue = value
            this.messageObj.dataLength = 1

            this.send2WebValue(index, value)
        },

        send2WebValue(index, value) {

            sendMessage(this.messageObj).then(response => {

                this.loopList[index].loading = false

                let res = this.checkResponse(response, index, value)

                if (res === 0) {
                    // 赋值后无法实时更新
                    this.$forceUpdate()

                    this.$message.success('成功')

                    this.loopList[index].loopValue = value
                }
            }, error => {
                this.loopList[index].loading = false
            })
        },

        send2Web(index, switchValue) {

            sendMessage(this.messageObj).then(response => {

                this.loopList[index].loading = false

                let res = this.checkResponse(response, index, switchValue)

                if (res === 0) {
                    // 赋值后无法实时更新
                    this.$forceUpdate()

                    this.$message.success('成功')

                    // this.$message.success(`成功，耗时 ${response.useTime} 秒`)

                    this.loopList[index].loopValue = switchValue
                    this.loopList[index].switchValue = switchValue
                }
            }, error => {

                this.loopList[index].loading = false

                if (switchValue === '0') {
                    this.loopList[index].switchValue = '1'
                }
                if (switchValue === '1') {
                    this.loopList[index].switchValue = '0'
                }

            })
        },

        checkResponse(response, index, switchValue) {
            let flag = 0
            if (response.msg === 'offline') {
                this.$message.error('网关不在线')
                flag = 1
                // return false
            }

            if (response.msg === 'timeout') {
                this.$message.error('超时,请重试')
                flag = 1
                // return false
            }

            if (response.msg === 'default') {
                this.$message.error('超时,请重试')
                flag = 1
                // return false
            }

            if (response.msg === 'inactive') {
                this.$message.error('未知错误')
                flag = 1
                // return false
            }

            if (response.value === '-1') {
                this.$message.error('失败')
                flag = 1
                // return false
            }
            if (flag === 1) {
                if (switchValue === '0') {
                    this.loopList[index].switchValue = '1'
                }
                if (switchValue === '1') {
                    this.loopList[index].switchValue = '0'
                }
            }
            return flag
        }
    }
}
</script>

<style scoped>
.el-switch__core {
    height: 50px;
}
</style>
